import React, { useEffect } from 'react';
import styles from './index.less';
import { DatePicker, Button, Select } from 'antd';

import { TRAlert } from '#/components';
import { useTRState } from '#/utils/trHooks';
import renovate from '#/utils/renovate';
import SettlementModal from '../SettlementModal';
import CheckboxModal from '../../../components/TjFrom/TjStation/modal';

const { RangePicker } = DatePicker;

export default function Header({ settlementUnitLists, onSearch }) {
  const [state, setState] = useTRState({
    settlementUnitList: [],
    selectModal: false,
    settlementUnitLists: [],
    dateValue: [],
  });

  useEffect(() => {
    let checkedList = _.flatten(
      settlementUnitLists?.map((i) => i?.children?.map((x) => x.stationId)),
    );
    let checkedListName = [];
    settlementUnitLists.forEach((item) => {
      checkedListName.push(item?.lable || '');
    });
    setState({
      settlementUnitList: checkedList,
      settlementUnitLists: checkedListName,
      dateValue: [],
    });
  }, [JSON.stringify(settlementUnitLists)]);

  const onHandleModal = async () => {
    const result = await CheckboxModal.show({
      title: '交易单元',
      treeData: settlementUnitLists,
      value: state.settlementUnitList,
      disabled: true,
    });

    if (result.index === 1) {
      const { checkedKeys } = result;
      setState({
        settlementUnitList: checkedKeys,
        // settlementUnitLists: checkedListName,
        selectModal: true,
      });
    }
    SettlementModal.dismiss();
  };

  const changeDate = (val) => {
    setState({
      dateValue: val,
    });
  };

  const searchFn = async () => {
    if (renovate.isRenovate) {
      let obj = await TRAlert.show('当前工作将不被保存，继续执行此操作？');
      if (obj.index === 1) {
        renovate.isRenovate = false;
        onSearch(state.dateValue);
      }
    } else {
      onSearch(state.dateValue);
    }
  };

  const _allSettlementUnitList =
    state.settlementUnitLists.map((item) => ({
      value: item,
      id: item,
      label: item,
      disabled: true,
    })) || [];

  const unitList = state.settlementUnitLists.map((item) => item);

  return (
    <div className={styles.contanier}>
      <div>
        <Select
          maxTagCount={1}
          open={false}
          showSearch={false}
          style={{
            width: 200,
          }}
          options={_allSettlementUnitList}
          value={
            !unitList.length
              ? '请选择交易单元'
              : unitList.length === _allSettlementUnitList.length
              ? '全部'
              : `${unitList.length}项/${_allSettlementUnitList.length}项`
          }
          placeholder="请选择交易单元"
          onClick={onHandleModal}
          showArrow={true}
        />
        <RangePicker
          style={{
            width: 260,
          }}
          value={state.dateValue}
          onChange={changeDate}
          format={'YYYYMMDD'}
          separator="-"
        />
        <Button
          className={styles.btn}
          type="primary"
          onClick={searchFn}
          disabled={!state.dateValue?.length}
        >
          查询
        </Button>
      </div>
    </div>
  );
}
